<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="chatbot">
    <style>
        .chat-fab {
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #2563eb;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
            cursor: pointer;
            z-index: 1000
        }

        /* 轻量化浅色主题：聊天面板 */
        .chat-panel {
            position: fixed;
            bottom: 90px;
            left: 20px;
            width: 400px; /* 可调：面板宽度 */
            height: 600px; /* 可调：最大高度 */
            background: #ffffff;
            color: #334155;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
            display: none;
            flex-direction: column;
            z-index: 1000
        }

        .chat-header {
            background: #f8fafc;
            color: #0f172a;
            padding: 12px 14px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .chat-header-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600
        }

        #chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: #ffffff
        }

        /* 消息气泡样式（浅色） */
        .chat-message {
            max-width: 92%;
            padding: 10px 12px;
            border-radius: 12px;
            line-height: 1.6;
            font-size: .95rem;
            border: 1px solid transparent
        }
        .user-message {
            align-self: flex-end;
            background: #eff6ff;
            color: #0f172a;
            border-color: #dbeafe
        }
        .bot-message {
            align-self: flex-start;
            background: #f8fafc;
            color: #334155;
            border-color: #e5e7eb
        }

        #chat-input-area {
            display: flex;
            padding: 12px;
            gap: 8px;
            border-top: 1px solid #e5e7eb;
            background: #f8fafc
        }

        #chat-input {
            flex: 1;
            background: #ffffff;
            color: #334155;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 10px;
            height: 100px; /* 可调：输入框高度 */
            resize: none;
            overflow-y: auto;
            outline: none
        }
        #chat-input::placeholder {
            color: #94a3b8
        }
        #chat-input:focus {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
            outline: none
        }

        #send-button {
            margin-left: 8px;
            background: #2563eb;
            border: none;
            color: #fff;
            border-radius: 10px;
            padding: 0 16px;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25)
        }
        #send-button:hover,
        #send-button:focus {
            background: #1d4ed8;
            box-shadow: 0 6px 16px rgba(37, 99, 235, 0.30)
        }

        @media (max-width: 480px) {
            .chat-panel {
                left: 10px;
                right: 10px;
                width: auto;
                max-width: calc(100% - 20px)
            }
        }
    </style>
    <div id="chat-fab" class="chat-fab" aria-label="打开智能助手" title="智能助手" data-turbo-permanent>
        <i class="bi bi-robot" style="font-size:24px;"></i>
    </div>
    <div id="ai-chatbot-panel" class="chat-panel" role="dialog" aria-modal="true" aria-labelledby="chatbot-title" data-turbo-permanent>
        <div class="chat-header">
            <div class="chat-header-title"><i class="bi bi-robot"></i><span id="chatbot-title">智能助手</span></div>
            <button id="chat-close-btn" class="btn btn-sm btn-outline-secondary">关闭</button>
        </div>
        <div id="chat-messages"></div>
        <div id="chat-input-area">
            <textarea id="chat-input" placeholder="输入您的问题..." rows="2"></textarea>
            <button id="send-button" type="button"><i class="bi bi-send-fill"></i></button>
        </div>
    </div>
    <script>
        (function () {
            const fab = document.getElementById('chat-fab');
            const panel = document.getElementById('ai-chatbot-panel');
            const closeBtn = document.getElementById('chat-close-btn');
            if (fab && panel) {
                fab.addEventListener('click', () => {
                    panel.style.display = (panel.style.display === 'none' || panel.style.display === '') ? 'flex' : 'none';
                });
            }
            if (closeBtn && panel) {
                closeBtn.addEventListener('click', () => {
                    panel.style.display = 'none';
                });
            }
        })();
    </script>
</div>
</body>
</html>